import { RiArrowRightLine } from 'react-icons/ri'
import { Button } from '@maybe-finance/design-system'
import type { StepProps } from './StepProps'
import { useState } from 'react'
import { AiOutlineLoading3Quarters as LoadingIcon } from 'react-icons/ai'

export function Intro({ onNext, title }: StepProps) {
    const [isSubmitting, setIsSubmitting] = useState(false)

    return (
        <div className="flex flex-col h-full">
            <div className="relative z-10 flex flex-col justify-center w-full max-w-md px-6 mx-auto text-center sm:mt-16 sm:px-0 grow">
                <div className="flex justify-center">
                    <Wave />
                </div>
                <h2 className="mt-6 text-pretty">{title}</h2>
                <p className="mt-2 text-base text-gray-50">
                    We&rsquo;re super excited you&rsquo;re here. In the next step we&rsquo;ll ask
                    you a few questions to complete your profile and get you all set up.
                </p>
                <Button
                    onClick={async () => {
                        setIsSubmitting(true)
                        await onNext()
                        setIsSubmitting(false)
                    }}
                    className="self-center mt-6"
                >
                    Continue{' '}
                    {isSubmitting ? (
                        <LoadingIcon className="w-5 h-5 ml-2 animate-spin" />
                    ) : (
                        <RiArrowRightLine className="w-5 h-5 ml-2" />
                    )}
                </Button>
            </div>
        </div>
    )
}

function Wave() {
    return (
        <svg
            className="animate-wave"
            width="56"
            height="56"
            viewBox="0 0 56 56"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M37.8543 6.56842C37.9048 5.84965 38.5288 5.30311 39.248 5.3477C40.4892 5.42466 42.7133 5.97862 44.7997 7.20763C46.904 8.4472 49.0234 10.4702 49.7179 13.5554C49.8758 14.2567 49.4335 14.9578 48.7301 15.1212C48.0267 15.2847 47.3284 14.8486 47.1705 14.1473C46.6849 11.9901 45.1898 10.4758 43.4599 9.45683C41.7121 8.42726 39.8824 8.00129 39.065 7.95061C38.3459 7.90602 37.8038 7.28719 37.8543 6.56842Z"
                fill="#44474C"
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M41.3484 2.16822C41.4193 1.45269 42.0585 0.938201 42.776 1.01907C45.0236 1.27239 47.6072 2.41968 49.7509 4.41179C50.2825 4.90569 50.3184 5.73087 49.8312 6.25487C49.344 6.77887 48.5182 6.80326 47.9867 6.30935C46.2256 4.67282 44.1607 3.79526 42.519 3.61022C41.8015 3.52936 41.2774 2.88375 41.3484 2.16822Z"
                fill="#44474C"
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M16.1996 54.1992C15.939 54.8547 15.196 55.1168 14.54 54.7846C13.3265 54.17 12.1982 53.5192 11.1065 52.5006C10.0151 51.4822 9.02713 50.1599 7.98676 48.2716C7.62241 47.6103 7.81712 46.8142 8.42166 46.4936C9.0262 46.173 9.81164 46.4492 10.176 47.1105C11.1142 48.8135 11.9203 49.8513 12.7138 50.5917C13.5071 51.332 14.3547 51.8388 15.4836 52.4106C16.1396 52.7428 16.4601 53.5436 16.1996 54.1992Z"
                fill="#44474C"
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M19.841 50.0374C19.6195 50.7133 18.9003 51.0191 18.2345 50.7204C16.7897 50.0722 14.9933 48.9859 13.2421 46.993C11.4939 45.0034 9.84424 42.1711 8.61065 38.101C8.39216 37.3801 8.75552 36.664 9.42225 36.5015C10.089 36.339 10.8066 36.7917 11.0251 37.5125C12.1533 41.2349 13.6106 43.6634 15.0298 45.2785C16.4461 46.8903 17.8776 47.7527 19.0365 48.2727C19.7023 48.5713 20.0624 49.3614 19.841 50.0374Z"
                fill="#44474C"
            />
            <path
                d="M48.7299 35.7364C47.678 39.1689 45.6321 42.2126 42.8508 44.4826C40.0694 46.7527 36.6776 48.1472 33.1039 48.4899C29.5302 48.8327 25.9351 48.1082 22.773 46.4082C19.6109 44.7082 17.0238 42.1088 15.3387 38.9388L7.20903 23.6353C6.75157 22.7748 6.51933 21.8125 6.53396 20.838C6.54859 19.8636 6.8096 18.9087 7.29269 18.0623C7.77577 17.2159 8.46522 16.5055 9.2968 15.9974C10.1284 15.4892 11.0751 15.1998 12.0486 15.1561L11.3996 13.934C10.7547 12.7186 10.5647 11.3128 10.8639 9.9698C11.1631 8.62675 11.9318 7.43459 13.0317 6.60785C14.1316 5.78111 15.4905 5.37408 16.8638 5.46001C18.2371 5.54595 19.5346 6.1192 20.5229 7.07661C21.0756 6.24204 21.8359 5.56551 22.729 5.11337C23.622 4.66122 24.6173 4.44901 25.6172 4.49754C26.617 4.54607 27.5871 4.85368 28.4322 5.39019C29.2773 5.92669 29.9684 6.67368 30.4378 7.55785L33.7948 13.8773C34.377 13.0959 35.1473 12.4745 36.0342 12.0707C36.9211 11.6669 37.8956 11.4939 38.8673 11.5678C39.8389 11.6417 40.7761 11.9601 41.5917 12.4934C42.4073 13.0267 43.0747 13.7575 43.5321 14.618L47.4034 21.9052C48.5281 24.0084 49.2245 26.3138 49.4522 28.6879C49.6798 31.062 49.4343 33.4578 48.7299 35.7364ZM44.4885 23.4537L40.6172 16.1665C40.4647 15.8794 40.2571 15.6251 40.0063 15.4182C39.7556 15.2113 39.4665 15.0558 39.1556 14.9607C38.8448 14.8655 38.5182 14.8325 38.1946 14.8635C37.8709 14.8945 37.5566 14.989 37.2695 15.1415C36.9824 15.294 36.7281 15.5016 36.5212 15.7524C36.3143 16.0032 36.1588 16.2922 36.0636 16.6031C35.9685 16.914 35.9354 17.2405 35.9665 17.5642C35.9975 17.8878 36.092 18.2021 36.2445 18.4892L38.1801 22.1328C38.206 22.1815 38.2294 22.2313 38.2502 22.2823C38.2654 22.3194 38.2777 22.357 38.29 22.3945C38.2945 22.4081 38.3 22.4213 38.3041 22.4349C38.3179 22.481 38.3289 22.5274 38.3384 22.574C38.3396 22.5798 38.3415 22.5854 38.3427 22.5911C38.352 22.6389 38.3585 22.687 38.3637 22.7351C38.3641 22.7402 38.3653 22.7454 38.3658 22.7506C38.3701 22.7966 38.3716 22.8425 38.3723 22.8881C38.3722 22.8964 38.3732 22.9042 38.3731 22.9123C38.373 22.9544 38.3701 22.9962 38.3666 23.038C38.3657 23.0501 38.3657 23.0621 38.3647 23.074C38.3606 23.1131 38.3539 23.1521 38.3471 23.1911C38.3446 23.2052 38.3434 23.2199 38.3405 23.234C38.3308 23.2804 38.3192 23.3264 38.3057 23.3719C38.3038 23.378 38.3028 23.3842 38.3009 23.3903C38.299 23.3964 38.2963 23.4023 38.2945 23.4087C38.2801 23.4536 38.2645 23.4984 38.2462 23.542C38.241 23.5542 38.2346 23.5655 38.2295 23.5775C38.2132 23.6151 38.1956 23.652 38.1766 23.6883C38.1718 23.697 38.1663 23.7051 38.1613 23.7136C38.1399 23.7521 38.1175 23.7905 38.0927 23.8274L38.0838 23.8397C38.0561 23.88 38.0273 23.9192 37.996 23.9571L37.9924 23.9611C37.9593 24.001 37.9244 24.0393 37.8876 24.0761L37.8842 24.0793C37.8473 24.116 37.8086 24.151 37.7684 24.184C37.7618 24.1893 37.7544 24.194 37.7476 24.1994C37.7124 24.2272 37.6765 24.2547 37.6384 24.2801C37.5928 24.3106 37.5456 24.3388 37.4972 24.3645C36.7315 24.7712 36.0535 25.3247 35.5018 25.9935C34.9501 26.6622 34.5355 27.433 34.2817 28.262C34.0279 29.0909 33.9399 29.9617 34.0226 30.8247C34.1054 31.6877 34.3573 32.5259 34.764 33.2915C34.8674 33.483 34.9319 33.6931 34.9537 33.9097C34.9756 34.1262 34.9544 34.345 34.8914 34.5533C34.8284 34.7616 34.7248 34.9554 34.5865 35.1235C34.4483 35.2917 34.2782 35.4308 34.086 35.5329C33.8938 35.635 33.6833 35.6981 33.4666 35.7185C33.2499 35.7389 33.0313 35.7163 32.8234 35.6519C32.6155 35.5875 32.4224 35.4826 32.2552 35.3433C32.088 35.2039 31.95 35.0329 31.8491 34.84C30.7516 32.7731 30.4213 30.3844 30.9165 28.0972C31.4118 25.8099 32.7007 23.7718 34.5549 22.344L33.3298 20.0378L33.3294 20.0367L27.5229 9.10657C27.2149 8.52674 26.6892 8.09301 26.0613 7.90081C25.4335 7.70861 24.7551 7.77367 24.1753 8.08169C23.5954 8.38971 23.1617 8.91545 22.9695 9.54325C22.7773 10.1711 22.8424 10.8495 23.1504 11.4293L28.1828 20.9029C28.3882 21.2894 28.4316 21.7417 28.3034 22.1603C28.1753 22.5788 27.8861 22.9293 27.4996 23.1347C27.113 23.34 26.6607 23.3834 26.2421 23.2552C25.8236 23.1271 25.4731 22.8379 25.2678 22.4514L20.2351 12.9778L20.2322 12.9717L18.6868 10.0628C18.5343 9.77565 18.3267 9.5214 18.0759 9.31452C17.8252 9.10763 17.5361 8.95217 17.2252 8.857C16.9144 8.76183 16.5878 8.72882 16.2642 8.75986C15.9406 8.79089 15.6263 8.88537 15.3392 9.03788C14.7593 9.3459 14.3256 9.87164 14.1334 10.4994C14.0382 10.8103 14.0052 11.1369 14.0363 11.4605C14.0673 11.7841 14.1618 12.0984 14.3143 12.3855L17.4107 18.2144L17.4113 18.2155L21.6697 26.2318C21.7805 26.4379 21.846 26.6652 21.8618 26.8986C21.8776 27.132 21.8433 27.3661 21.7613 27.5852C21.6793 27.8044 21.5514 28.0034 21.3862 28.1691C21.221 28.3347 21.0223 28.4632 20.8034 28.5458C20.7852 28.5528 20.767 28.5585 20.7491 28.5649C20.7028 28.5808 20.6564 28.5945 20.6097 28.6062C20.591 28.611 20.5726 28.6157 20.5539 28.6198C20.4963 28.6321 20.438 28.6414 20.3793 28.6475L20.3638 28.6498C20.2999 28.6554 20.2357 28.6573 20.1716 28.6554C20.1664 28.6552 20.1611 28.6559 20.1557 28.6557C20.145 28.6553 20.1343 28.6531 20.1234 28.6525C20.0734 28.6497 20.0238 28.6447 19.9745 28.6375C19.9568 28.6348 19.9393 28.6325 19.9217 28.6294C19.8627 28.619 19.8044 28.6054 19.7469 28.5886L19.7346 28.5857C19.673 28.5667 19.6126 28.5442 19.5537 28.5182C19.5384 28.5115 19.5238 28.5041 19.509 28.497C19.4642 28.476 19.4203 28.4529 19.3775 28.4278C19.3621 28.419 19.3467 28.4102 19.3316 28.4005C19.278 28.3672 19.2263 28.3307 19.1769 28.2915L19.1735 28.2889C19.1225 28.2471 19.0741 28.2024 19.0285 28.1549C19.0166 28.1425 19.0053 28.1293 18.9936 28.1165C18.9591 28.0787 18.9264 28.0392 18.8956 27.9979C18.8847 27.9835 18.8739 27.9695 18.8632 27.9546C18.8235 27.8988 18.7873 27.8406 18.7548 27.7803L14.4964 19.764C14.1859 19.1887 13.6605 18.7596 13.0348 18.5704C12.409 18.3811 11.7339 18.447 11.1566 18.7537C10.5793 19.0604 10.1467 19.583 9.95327 20.2074C9.75984 20.8318 9.82126 21.5074 10.1241 22.0868L18.2538 37.3903C20.1019 40.8692 23.2563 43.4715 27.0231 44.6247C30.7899 45.7778 34.8605 45.3874 38.3394 43.5393C41.8184 41.6912 44.4207 38.5368 45.5739 34.77C46.727 31.0032 46.3366 26.9326 44.4885 23.4537Z"
                fill="url(#paint0_linear_881_42604)"
            />
            <path
                d="M44.4885 23.4537L40.6172 16.1665C40.4647 15.8794 40.2571 15.6251 40.0063 15.4182C39.7556 15.2113 39.4665 15.0558 39.1556 14.9607C38.8448 14.8655 38.5182 14.8325 38.1946 14.8635C37.8709 14.8945 37.5566 14.989 37.2695 15.1415C36.9824 15.294 36.7281 15.5016 36.5212 15.7524C36.3143 16.0032 36.1588 16.2922 36.0636 16.6031C35.9685 16.914 35.9354 17.2405 35.9665 17.5642C35.9975 17.8878 36.092 18.2021 36.2445 18.4892L38.1801 22.1328C38.206 22.1815 38.2294 22.2313 38.2502 22.2823C38.2654 22.3194 38.2777 22.357 38.29 22.3945C38.2945 22.4081 38.3 22.4213 38.3041 22.4349C38.3179 22.481 38.3289 22.5274 38.3384 22.574C38.3396 22.5798 38.3415 22.5854 38.3427 22.5911C38.352 22.6389 38.3585 22.687 38.3637 22.7351C38.3641 22.7402 38.3653 22.7454 38.3658 22.7506C38.3701 22.7966 38.3716 22.8425 38.3723 22.8881C38.3723 22.8893 38.3723 22.8904 38.3723 22.8916C38.3724 22.8946 38.3725 22.8975 38.3727 22.9004C38.3727 22.9008 38.3727 22.9012 38.3728 22.9016C38.3729 22.9051 38.3731 22.9087 38.3731 22.9123C38.373 22.9544 38.3701 22.9962 38.3666 23.038C38.366 23.0469 38.3658 23.0556 38.3653 23.0644C38.3653 23.0654 38.3652 23.0663 38.3652 23.0673C38.365 23.0696 38.3649 23.0718 38.3647 23.074C38.3606 23.1131 38.3539 23.1521 38.3471 23.1911C38.3446 23.2052 38.3434 23.2199 38.3405 23.234C38.3308 23.2804 38.3192 23.3264 38.3057 23.3719C38.3038 23.378 38.3028 23.3842 38.3009 23.3903C38.299 23.3964 38.2963 23.4023 38.2945 23.4087C38.2801 23.4536 38.2645 23.4984 38.2462 23.542C38.2442 23.5467 38.242 23.5513 38.2398 23.5559C38.239 23.5574 38.2383 23.5588 38.2376 23.5603C38.2351 23.5654 38.2326 23.5704 38.2303 23.5756C38.23 23.5762 38.2297 23.5769 38.2295 23.5775C38.2132 23.6151 38.1956 23.652 38.1766 23.6883C38.1718 23.697 38.1663 23.7051 38.1613 23.7136C38.1399 23.7521 38.1175 23.7905 38.0927 23.8274L38.0838 23.8397C38.0561 23.88 38.0273 23.9192 37.996 23.9571L37.9924 23.9611C37.9593 24.001 37.9244 24.0393 37.8876 24.0761L37.8842 24.0793C37.8473 24.116 37.8086 24.151 37.7684 24.184C37.7618 24.1893 37.7544 24.194 37.7476 24.1994C37.7124 24.2272 37.6765 24.2547 37.6384 24.2801C37.5928 24.3106 37.5456 24.3388 37.4972 24.3645C36.7315 24.7712 36.0535 25.3247 35.5018 25.9935C34.9501 26.6622 34.5355 27.433 34.2817 28.262C34.0279 29.0909 33.9399 29.9617 34.0226 30.8247C34.1054 31.6877 34.3573 32.5259 34.764 33.2915C34.8674 33.483 34.9319 33.6931 34.9537 33.9097C34.9756 34.1262 34.9544 34.345 34.8914 34.5533C34.8284 34.7616 34.7248 34.9554 34.5865 35.1235C34.4483 35.2917 34.2782 35.4308 34.086 35.5329C33.8938 35.635 33.6833 35.6981 33.4666 35.7185C33.2499 35.7389 33.0313 35.7163 32.8234 35.6519C32.6155 35.5875 32.4224 35.4826 32.2552 35.3433C32.088 35.2039 31.95 35.0329 31.8491 34.84C30.7516 32.7731 30.4213 30.3844 30.9165 28.0972C31.4118 25.8099 32.7007 23.7718 34.5549 22.344L33.3298 20.0378L33.3294 20.0367L27.5229 9.10657C27.2149 8.52674 26.6892 8.09301 26.0613 7.90081C25.4335 7.70861 24.7551 7.77367 24.1753 8.08169C23.5954 8.38971 23.1617 8.91545 22.9695 9.54325C22.7773 10.1711 22.8424 10.8495 23.1504 11.4293L28.1828 20.9029C28.3882 21.2894 28.4316 21.7417 28.3034 22.1603C28.1753 22.5788 27.8861 22.9293 27.4996 23.1347C27.113 23.34 26.6607 23.3834 26.2421 23.2552C25.8236 23.1271 25.4731 22.8379 25.2678 22.4514L20.2351 12.9778L20.2322 12.9717L18.6868 10.0628C18.5343 9.77565 18.3267 9.5214 18.0759 9.31452C17.8252 9.10763 17.5361 8.95217 17.2252 8.857C16.9144 8.76183 16.5878 8.72882 16.2642 8.75986C15.9406 8.79089 15.6263 8.88537 15.3392 9.03788C14.7593 9.3459 14.3256 9.87164 14.1334 10.4994C14.0382 10.8103 14.0052 11.1369 14.0363 11.4605C14.0673 11.7841 14.1618 12.0984 14.3143 12.3855L17.4107 18.2144L17.4113 18.2155L21.6697 26.2318C21.7805 26.4379 21.846 26.6652 21.8618 26.8986C21.8776 27.132 21.8433 27.3661 21.7613 27.5852C21.6793 27.8044 21.5514 28.0034 21.3862 28.1691C21.221 28.3347 21.0223 28.4632 20.8034 28.5458C20.7985 28.5477 20.7936 28.5495 20.7887 28.5512C20.7841 28.5528 20.7795 28.5544 20.775 28.556C20.7728 28.5567 20.7707 28.5575 20.7685 28.5582C20.7666 28.5588 20.7647 28.5595 20.7628 28.5601C20.7582 28.5617 20.7536 28.5633 20.7491 28.5649C20.7028 28.5808 20.6564 28.5945 20.6097 28.6062L20.602 28.6082C20.5859 28.6122 20.5701 28.6162 20.5539 28.6198C20.4963 28.6321 20.438 28.6414 20.3793 28.6475L20.3638 28.6498C20.2999 28.6554 20.2357 28.6573 20.1716 28.6554C20.1664 28.6552 20.1611 28.6559 20.1557 28.6557C20.1548 28.6556 20.1538 28.6556 20.1529 28.6555C20.1482 28.6552 20.1435 28.6546 20.1388 28.654C20.1357 28.6536 20.1326 28.6533 20.1295 28.6529C20.1275 28.6527 20.1254 28.6526 20.1234 28.6525C20.0734 28.6497 20.0238 28.6447 19.9745 28.6375C19.9568 28.6348 19.9393 28.6325 19.9217 28.6294C19.8627 28.619 19.8044 28.6054 19.7469 28.5886L19.7346 28.5857C19.673 28.5667 19.6126 28.5442 19.5537 28.5182C19.5384 28.5115 19.5238 28.5041 19.509 28.497C19.4642 28.476 19.4203 28.4529 19.3775 28.4278C19.3621 28.419 19.3467 28.4102 19.3316 28.4005C19.278 28.3672 19.2263 28.3307 19.1769 28.2915L19.1735 28.2889C19.1225 28.2471 19.0741 28.2024 19.0285 28.1549C19.0166 28.1425 19.0053 28.1293 18.9936 28.1165C18.9591 28.0787 18.9264 28.0392 18.8956 27.9979C18.8847 27.9835 18.8739 27.9695 18.8632 27.9546C18.8235 27.8988 18.7873 27.8406 18.7548 27.7803L14.4964 19.764C14.1859 19.1887 13.6605 18.7596 13.0348 18.5704C12.409 18.3811 11.7339 18.447 11.1566 18.7537C10.5793 19.0604 10.1467 19.583 9.95327 20.2074C9.75984 20.8318 9.82126 21.5074 10.1241 22.0868L18.2538 37.3903C20.1019 40.8692 23.2563 43.4715 27.0231 44.6247C30.7899 45.7778 34.8605 45.3874 38.3394 43.5393C41.8184 41.6912 44.4207 38.5368 45.5739 34.77C46.727 31.0032 46.3366 26.9326 44.4885 23.4537Z"
                fill="#16161A"
            />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M38.3727 22.9004C38.3725 22.8975 38.3724 22.8946 38.3723 22.8916C38.3724 22.895 38.3726 22.8983 38.3728 22.9016C38.3727 22.9012 38.3727 22.9008 38.3727 22.9004ZM38.3653 23.0644C38.3653 23.0654 38.3652 23.0663 38.3652 23.0673C38.365 23.0696 38.3649 23.0718 38.3647 23.074M38.2303 23.5756C38.2326 23.5704 38.2351 23.5654 38.2376 23.5603C38.2383 23.5588 38.239 23.5574 38.2398 23.5559C38.2365 23.5624 38.2333 23.5689 38.2303 23.5756ZM20.7628 28.5601C20.7647 28.5595 20.7666 28.5588 20.7685 28.5582C20.7707 28.5575 20.7728 28.5567 20.775 28.556C20.7709 28.5574 20.7669 28.5588 20.7628 28.5601Z"
                fill="#16161A"
            />
            <defs>
                <linearGradient
                    id="paint0_linear_881_42604"
                    x1="30.2727"
                    y1="10.124"
                    x2="48.9925"
                    y2="42.668"
                    gradientUnits="userSpaceOnUse"
                >
                    <stop stopColor="#4CC9F0" />
                    <stop offset="0.28684" stopColor="#4361EE" />
                    <stop offset="0.524848" stopColor="#7209B7" />
                    <stop offset="0.83892" stopColor="#F72585" />
                </linearGradient>
            </defs>
        </svg>
    )
}
